<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
    <meta http-equiv="Content-Language" content="es" >
    <meta name="generator" content="XEmacs + HTML::Mason + mod_perl">
    <title>Arquitecturas de Altas Prestaciones:Taller 1. Introducción al lenguaje de programación Javascript</title>
    <meta name="AUTHOR" content="Juan Julián Merelo Guervós">
    <meta name="keywords" content="Computación distribuida, computación paralela, p2p, overlay, grid, evaluación de prestaciones, javascript">
    <meta name="description" content="Introducción rápida al lenguaje Javascript">


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>



    <link rel ='stylesheet' type = "text/css" href = "AAP.css" title='normal'>
    <link rel ='stylesheet' type = "text/css" href = "highlight.css" title='normal'>
    <link rel="shortcut icon" href="AAP.png" type="image/x-icon">
  </head>
<body>
<h1><a href='/~jmerelo/asignaturas/AAP'>Arquitecturas de Altas Prestaciones</a>: TJ
      Taller 1. Introducción al lenguaje de programación Javascript</h1>




<div class='objetivos'> <ul>
	  
	  <li>Trabajar con Javascript en el navegador</li>
	  <li>Usar librerías populares de JavaScript en ese contexto</li>

      </ul>
</div>  

<div class='nav'><ul>
	<li> <A href='/~jmerelo/asignaturas/AAP/'><em>Página de la
	      asignatura</em></A></li>
	<li> <A href='AAP-Taller-1.mhtml'><em>Introducción a Javascript</em></A></li>
	<li> <A href='AAP-Taller-2.mhtml'><em>Tema siguiente: Interfaces REST</em></A></li>
	<li> <A href='/~jmerelo/'>Página del profesor</A></li>
	<li><a href='http://delicious.com/jmerelo/aap'>Enlaces en del.icio.us
	    relacionados con la asignatura.</a></li>
      </ul>
    </div>

<h2><a name='TJ:t1:DOM'>TJ.1 El modelo de objetos </a> <a href='#TJ:t1:DOM' style='font-size:small'>#</a></h2>



  <p>En realidad es difícil encontrar un enfoque como el de <a href='AAP-Taller-1.mhtml'>este tema</a>,
      centrado en JS como lenguaje y no como un chisme más dentro del
      navegador. Eventualmente, habrá que tratar con esto, así que
      este momento es tan bueno como cualquier otro. En realidad, la
      mayor diferencia entre JS-sin-navegador y JS-con-navegador es el
      bagaje de objetos con el que tiene que trabajar y también el
      modelo que se va a usar para entrada y salida: la propia
      <em>página</em> en la que está inserto el programa.</p>

<p>En general, lo que hace un navegador es analizar el HTML que le
      envía el servidor y convertirlo en un árbol, el <a href='http://es.wikipedia.org/wiki/DOM'>DOM</a> o <em>document
      object model</em>. Todo lo que hay en el documento es una hoja o un
      nudo dentro de ese árbol. Lo importante es que los programas JS,
      aparte de ser hojas dentro de ese árbol, también actúan sobre
      ese árbol, añadiendo o quitando hojas, o simplemente alterando
      sus propiedades. El DOM está definido como un <a
	href='http://www.w3.org/DOM/'>estándar del W3</a>, pero eso no
      quita que haya problemas de compatibilidad entre los diferentes
      navegadores. Por ejemplo, <a
	href='https://developer.mozilla.org/en/docs/Gecko_DOM_Reference'>Mozilla</a> tiene su modelo de objetos, que usa en sus navegadores, los más bonitos del mundo mundial. </p>

<p>Para empezar, vamos a ver qué pinta tiene el DOM de un documento
      cualquiera. Por ejemplo, usemos <a
	href='http://geneura.ugr.es/~jmerelo/asignaturas/AAP/'>la página de la
	asignatura</a>. En Firefox, se ve el DOM completo con la
      combinación de teclas Ctrl+Shift+I. Para ésta página, saldría
      algo así:
<img src='imagenes/AAP-DOM.png' alt='DOM de una página' >
La estructura es la que cabe esperar: hay un nodo raíz, etiquetado
      como <code>document</code>, del que descienden las dos partes del documento
      HTML: <code>HEAD</code> y <code>BODY</code>. Y de ahí, pues el resto.</p>

<p>Todos las herramientas relacionadas con la página web, como el CSS,
      trabajan y tienen en cuenta esta estructura DOM del documento. Y
      cuando un programa JS se ejecuta dentro de un documento, puede
      alterar su estructura. Veámoslo, por ejemplo, en el <a
	href='code/js/docwrite.html'><code>docwrite.html</code></a>:</p>
<code class='ejemplo'><span class="kwa">&lt;!DOCTYPE HTML PUBLIC</span> <span class="str">&quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;</span><span class="kwa">&gt;</span>
<span class="kwa">&lt;html&gt;</span>
  <span class="kwa">&lt;head&gt;</span>
    <span class="kwa">&lt;title&gt;</span>Prueba document.write<span class="kwa">&lt;/title&gt;</span>
  <span class="kwa">&lt;/head&gt;</span>

  <span class="kwa">&lt;body&gt;</span>
    <span class="kwa">&lt;h1&gt;</span>Prueba document.write<span class="kwa">&lt;/h1&gt;</span>

<span class="kwa">&lt;script type='application/javascript'&gt;</span>document.write('<span class="kwa">&lt;p&gt;</span>Esto es un nuevo nodo<span class="kwa">&lt;/p&gt;</span>')<span class="kwa">&lt;/script&gt;</span>

    <span class="kwa">&lt;hr&gt;</span>
    <span class="kwa">&lt;address&gt;</span><span class="kwa">&lt;a href=</span><span class="str">&quot;mailto:jmerelo&#64;localhost.localdomain&quot;</span><span class="kwa">&gt;</span>Juan J. Merelo<span class="kwa">&lt;/a&gt;</span><span class="kwa">&lt;/address&gt;</span>
<span class="com">&lt;!-- Created: Wed Feb 21 18:45:35 CET 2007 --&gt;</span>
<span class="com">&lt;!-- hhmts start --&gt;</span>
Last modified: Wed Feb <span class="num">21 18</span>:<span class="num">46</span>:<span class="num">41</span> CET <span class="num">2007</span>
<span class="com">&lt;!-- hhmts end --&gt;</span>
  <span class="kwa">&lt;/body&gt;</span>
<span class="kwa">&lt;/html&gt;</span>
<!--HTML generated by highlight 2.4.8, http://www.andre-simon.de/-->
</code>

<p>que crearía un DOM con el aspecto siguiente:
<img src='imagenes/nuevonodo.png' alt='Creación de un nodo en el DOM
	con JS'>
Como se ve, el nodo <code>P</code> sigue al nodo <code>script</code>, es decir, que el nodo
      se crea en el DOM justamente siguiendo al nodo que incluye el
      script. En realidad, se crean tantos nodos como a uno le
      interese, pero de esta forma sólo se pueden colocar en el sitio
      donde está el script. Así que habrá que imaginar otra forma de
      hacerlo.</p>

<p>Navegar por el modelo de objetos no es excesivamente complicado,
      gracias a las funciones <code>getElementsBy*</code>, que escogen elementos
      del DOM de acuerdo con alguna
      característica. <code>getElementsByTagName</code> escoge elementos por el
      nombre de la etiqueta, mientras que <code>getElementById</code> usa el
      atributo <code>id</code>; nótese la diferencia entre <code>Elements</code> y
      <code>Element</code>; en el primer caso se devuelve un <code>Array</code> y en el
      segundo uno solo, porque la Id es única. Cuando se trabaja con
      un documento, habrá que 
      usar de forma sabia los atributos y clases de forma que sea
      fácil escoger y trabajar con los elementos de un tipo
      determinado, o con un elemento en concreto. Por ejemplo,
      <code>getElementByTagName('h2')</code> devolverá un array con
      todos los elementos que tengan esa etiqueta, y
      <code>getElementById('ej.t1.3')</code> devolverá el tercer
      bloque de ejercicios de este tema, como veremos en el ejemplo
      siguiente (que está incluido en la misma página):</p>
<code class='ejemplo'>Bloque  <input type="text" name="bloque"
				     value="1" onChange='putBloque(value)'></code>
<div id='resultado1'>&nbsp;</div>
<script type='application/javascript'>function putBloque(value) {
	  var ejs = document.getElementById('ej.T1.'+value);
	  document.getElementById('resultado1').innerHTML=ejs.textContent;
}</script>
<code class='ejemplo'><span class="kwa">function</span> <span class="kwd">putBloque</span><span class="sym">(</span><span class="kwc">value</span><span class="sym">) {</span>
	  <span class="kwa">var</span> ejs <span class="sym">=</span> <span class="kwc">document</span><span class="sym">.</span><span class="kwc">getElementById</span><span class="sym">(</span><span class="str">'ej.T1.'</span><span class="sym">+</span><span class="kwc">value</span><span class="sym">);</span>
	  <span class="kwc">document</span><span class="sym">.</span><span class="kwc">getElementById</span><span class="sym">(</span><span class="str">'resultado1'</span><span class="sym">).</span><span class="kwc">innerHTML</span><span class="sym">=</span>ejs<span class="sym">.</span>textContent<span class="sym">;</span>
<span class="sym">}</span>
<!--HTML generated by highlight 2.4.8, http://www.andre-simon.de/-->
      </code>

<p>Un par de líneas sólo de JS: una para buscar el elemento (la
      primera) y la segunda para extraer su contenido (<code>textContent</code>)
      e introducirlo en otro, el elemento <code>resultado1</code> que teníamos
      preparado al efecto. <code>innerHTML</code> es el HTML interno de un
      elemento: al asignarle un valor, efectivamente, sustituimos
      parte del contenido de la página dinámicamente. ¿No es una
      maravilla? </p>

<div class='ejercicios' id='ej.TJ.1'>
<h3>Bloque TJ.1</h3>
<ol>
    <li> Salvar esta página, y sobre ella hacer un programa JS que imprima
    todos los títulos de secciones.
</li>
</ol>
</div>





<h2><a name='TJ:t1:greasemonkey'>TJ.2 Usando GreaseMonkey </a> <a href='#TJ:t1:greasemonkey' style='font-size:small'>#</a></h2>



<p>No se sabe porqué los temas de JS tienen tanta relación con los
      primates, pero el hecho es que <a
	href='http://greasespot.com'>GreaseMonkey</a> es un <em>plugin</em>
      para los navegadores <a href='http://mozilla.org'>Mozilla</a>
      que permite instalar en el navegador programillas JS específicos
      de una página o grupo de páginas. Para trabajar con él, lo
      primero que hay que hacer es instalarlo y reiniciar el
      navegador.</p>

<p>Una vez hecho eso, GreaseMonkey reconoce los scripts con la
      extensión <code>.user.js</code> como propios, los instala, y
      permite gestionarlos, activarlos, y desactivarlos, desde un
      icono con un monito en la barra inferior del navegador. O sea,
      que una vez que se vea el monito, podemos cargar <a
	href='code/js/aap-nav.user.js'>este programa
	(<code>aap-nav.user.js</code>)</a> que lo usa:</p>
<code class='ejemplo'>// ==UserScript==
// @name                AAP-Nav
// @namespace           http://geneura.org/projects/greasemonkey
// @description         Navegación por las secciones de AAP
// @include             http://geneura.ugr.es/~jmerelo/asignaturas/*
// ==/UserScript==

GM_log('Entrando AAP-Nav');
var h2 = document.getElementsByTagName('h2');
var a_nodes = new Array;
var anchors = new Array;
for ( var secs = 0; secs < h2.length; secs ++ ) {
  var thisA = h2[secs].getElementsByTagName('a');
  a_nodes[secs] = thisA[0];
  anchors[secs] = thisA[0].getAttribute('name');
  GM_log('Anchor ' + secs + " " + anchors[secs]);
}



for ( var secs = 0; secs < h2.length; secs ++ ) {
  var span = document.createElement('span');
  span.setAttribute('style','background:lightblue');
  if ( secs > 0 ) {
    var ahref = document.createElement('a');
    ahref.setAttribute('href','#'+anchors[secs-1]);
    var txt=document.createTextNode('^');
    ahref.appendChild(txt);
    span.appendChild(ahref);
  }
  if ( secs < h2.length -1  ) {
    span.appendChild(document.createTextNode(' | '));
    var ahref = document.createElement('a');
    ahref.setAttribute('href','#'+anchors[secs+1]);
    var txt=document.createTextNode('v');
    ahref.appendChild(txt);
    span.appendChild(ahref);
  }
  a_nodes[secs].parentNode.insertBefore(span,a_nodes[secs]);
}
    </code>

<p>Este programa añade unas flechitas de navegación a los apuntes de
      esta asignatura, de forma que se pueda pasar de cada sección a
      la anterior a la siguiente (de ahí lo de aap-nav). Tiene dos
      partes: la primera parte halla las etiquetas de navegación, y la
      segunda las inserta. Tres partes, de hecho, si incluimos las
      declaraciones del principio, que son para uso y disfrute del
      propio GreaseMonkey. Las dos primeras son terminológicas: cómo
      se llama, y qué espacio de nombres usa. Ésto es para distinguir
      scripts con el mismo nombre de diferentes fuentes. La tercera,
      una descripción, aparece en los directorios correspondientes y
      cuando gestionamos los scripts.</p>

<p>El cuarto apartado es el más importante. Es un patrón de las
      páginas en las que va a funcionar el script. Éste no tendría
      sentido fuera de las páginas de las asignaturas que imparto, así
      que incluimos en el mismo simplementa a las que hay en ese
      directorio. Cuando el navegador cargue alguna página con ese
      patrón, GM lo detectará y cargará el script.</p>

<p>El programa en sí hace uso de los elementos explicados en la
      sección anterior: extrae del documento los títulos de capítulo
      (h2) y de ahí los <em>anchor</em> (<code>a name</code>) y sus
      atributos, metiendo todo lo metible en un bucle. Hace falta
      tenerlos todos en un array, por eso se usa un segundo bucle para
      insertar en la página los elementos de navegación.</p>

<p>Este segundo bucle crea elementos a tutiplén, usando
      <code>createElement</code> (para crear un elemento), <code>setAttribute</code> (para
      poner su atributo) y <code>createTextNode</code> (para meter texto dentro
      de los elementos). Luego, a modo de injerto, se van metiendo los
      elementos unos dentro de otros usando <code>appendChild</code>. Y,
      finalmente, se insertan los elementos creados en el documento en
      la penúltima línea:</p>
<div
      class='ejemplo'>a_nodes[secs].parentNode.insertBefore(span,a_nodes[secs]);</div>
<p>que navega desde el <em>ancla</em> hasta su padre (<code>parentNode</code>) e
      inserta antes del mismo (<code>insertBefore</code>) el <code>span</code> que hemos
      creado previamente. El resultado, si todo ha ido bien, deberías
      verlo en este mismo tutorial.</p>

<p>Además, hace uso de algunas funciones propias de GM:
      <CODE>GM_log</code>, que escribe en la consola de
      Javascript. Muy útil para depurarlo, inútil en producción; pero
      si abres la consola de JS verás los mensajes que ha usado</p>.


<div class='ejercicios' id='ej.TJ.2'>
<h3>Bloque TJ.2</h3>
<ol>
    <li> Hacer un script JS que navegue desde cada bloque de ejercicios al
    siguiente. 
</li>
</ol>
</div>





<h2><a name='TJ:tj:eventos'>TJ.3 Trabajando con otras
  ventanas </a> <a href='#TJ:tj:eventos' style='font-size:small'>#</a></h2>



<p>Una de las características específicas del DOM es la posibilidad de
  trabajar con otras ventanas, creando contenido y presentándolo en
  las mismas. Para eso se usa el objeto <code>window</code>; lo interesante de
  este elemento eso que está incluido en el propio DOM, por lo que se
  puede usar desde JavaScript como hacemos en el siguiente
  programa. No es que sea aconsejable, por cierto; debe usarse sólo
  en caso de que sea imprescindible (a veces se usa para
  autenticación, por ejemplo, o para no crear elementos nuevos en el
  interfaz). Por ejemplo, se hace así
  en <a href='code/js/windowopen.html'>este programa</a></p>
<code class='ejemplo'><span class="hl kwa">&lt;!DOCTYPE</span> HTML PUBLIC <span class="hl str">&quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;</span> <span class="hl str">&quot;http://www.w3.org/TR/html4/loose.dtd&quot;</span><span class="hl kwa">&gt;</span>
<span class="hl kwa">&lt;html&gt;</span>
<span class="hl kwa">&lt;head&gt;</span>
<span class="hl kwa">&lt;meta</span> <span class="hl kwb">http-equiv</span>=<span class="hl str">&quot;Content-Type&quot;</span> <span class="hl kwb">content</span>=<span class="hl str">&quot;text/html; charset=iso-8859-15&quot;</span><span class="hl kwa">&gt;</span>
<span class="hl kwa">&lt;title&gt;</span>Probando window.open<span class="hl kwa">&lt;/title&gt;</span>
<span class="hl kwa">&lt;script</span> type='application/javascript'<span class="hl kwa">&gt;</span>
var contenido = <span class="hl str">&quot;&lt;html&gt;&lt;head&gt;&lt;title&gt;Mi ventanita&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;h1&gt;Mi ventanita&lt;/h1&gt;&lt;/body&gt;&lt;/html&quot;</span>;
newwindow=window.open();
newdocument=newwindow.document;
newdocument.write(contenido);
<span class="hl kwa">&lt;/script&gt;</span>
</code>
<p>En este caso, se crea una nueva página estática usando <code>write</code>
  sobre el documento que hemos creado. No es que sea demasiado útil
  (se podría usar el URL directamente pasándoselo como parámetro a
  <code>open</code>) pero demuestra las posibilidades del mismo, que también se
  pueden ver
  en <a href='http://www.htmlgoodies.com/beyond/javascript/javascript-dynamic-document-creation-in-new-windows.html'>este mini-tutorial</a>.</p>

<div class='ejercicios' id='ej.TJ.3'>
<h3>Bloque TJ.3</h3>
<ol>
    <li> Hacer una página que abra un número variable de páginas (cómo se
  obtenga ese número variable se deja como ejercicio para el alumno). 
</li>
</ol>
</div>





<h2><a name='TJ:tj:selectores'>TJ.4 Selectores </a> <a href='#TJ:tj:selectores' style='font-size:small'>#</a></h2>



<p>Las hojas de estilo <a href='http://es.wikipedia.org/wiki/CSS'>CSS</a> son una especificación de la
  apariencia de elementos tanto HTML como XML que permiten asignar
  parámetros de presentación específico a cada elemento o a grupos de
  ellos. No es el objetivo de esta asignatura enseñarlas, pero su
  utilidad va más allá de la mera apariencia, permitiendo designar
  (usando IDs) y agrupar (usando <em>clases</em>) elementos o grupos de los
  mismos. Cuando hemos hablado anteriormente de seleccionar un solo
  elemento por la id, estamos usando un tipo de selector básico; sin
  embargo, si queremos trabajar con selectores más generales (como
  haremos más adelante) es conveniente que se aprenda la sintaxis de
  CSS que es la que se usa de forma más general.</p>

<p>La <a href='http://www.w3.org/TR/CSS2/selector.html'>sintaxis más
    general está especificada por la W3</a> y se puede observar en
    cualquier hoja de estilo, por ejemplo <a href='AAP.css'>la de esta
    misma página</a>. De esta,
    extraemos <a href='http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/'>los
    30 selectores que se deben memorizar</a>, principalmente <code>#</code> que
    se refiere a un id específico (por ejemplo, <code>#ej.1.1</code>
    seleccionaría un div declarado como <code>div id='ej1.1.1'</code>
    y <code>.</code> que se refiere a una clase; <code>.ej</code> por ejemplo seleccionaría
  todos los div declarados así: <code>div class='ej'</code>.</p>

<div class='ejercicios' id='ej.TJ.4'>
<h3>Bloque TJ.4</h3>
<ol>
    <li> Modificar esta hoja de estilo y página para que las etiquetas tipo h3 que se
  usan en los ejercicios tengan su propia clase. Añadir una entrada a
  la hoja de estilo (o crear una hoja de estilo y página nueva) en la
  que se puedan mezclar diferentes tipos de texto con etiqueta h3 y
  que tengan apariencia diferente. 
</li>
</ol>
</div>





<h2><a name='TJ:tj:eventos'>TJ.5 Eventos </a> <a href='#TJ:tj:eventos' style='font-size:small'>#</a></h2>



<p>Para entender bien el uso de JavaScript en el navegador es
  conveniente introducir el concepto de eventos. Se trata simplemente
  de señales generadas por el mismo, o bien registradas por el usuario
  (es decir, introducidas por el usuario cuando suceda algo
  determinado). El navegador, por ejemplo, genera un evento cuando el
  ratón entra o sale de un elemento, cuando se carga la página, o
  cuando se pulsa el ratón sobre un elemento
  activo. He <a href='http://www.koderguru.com/tutorials/javascript/javascriptevents.php'>la
  lista de todos los eventos y de los elementos a los que
  afectan</a>. Los eventos permiten por un lado trabajar con un patrón
  de programación reactiva, en la que se reacciona a lo que va
  sucediendo en el navegador y, a la vez, un cierto grado de
  concurrencia porque cada evento sucede en una hebra
  diferente. También se trabaja de forma asíncrona, porque en muchos
  casos no se llevarán a cabo de forma secuencial sino cuando se
  cumplan ciertas condiciones.</p>

<P>La forma más simple de trabajar con eventos es usar los atributos
  de un elemento HTML para activarlos, como <a href='#'
  onClick='alert("Esto es un evento activado")'>aquí mismo</a>. El
  atributo <code>onClick</code> tiene como valor directamente una llamada a una
  función en JS que se activa cuando se pulsa el botón sobre este tipo
  de elemento.</p>

<p>Hay <a href='http://101.lv/learn/JSweek/ch5.htm'>una docena
    de eventos</a>, pero no todos se usan con la misma asiduidad. Uno que
    se usa habitualmente es el evento <code>load</code>, que ejecuta algo sólo
    cuando se ha cargado la página completa. El comienzo de ejecución
    de cualquier elemento de JS conviene, como buena práctica, que se
    haga tras el evento onLoad, porque si no se ha terminado de cargar
    puede que el DOM no esté completo o que no lo estén las
    definiciones de algunos elementos que el programa JS pueda
    necesitar. El evento <code>load</code> sólo se activa desde el elemento
  <code>body</code>, como en <a href='code/js/onload.html'>este ejemplo</a></p>

<code class='ejemplo'><span class="hl kwa">&lt;!DOCTYPE</span> HTML PUBLIC <span class="hl str">&quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;</span> <span class="hl str">&quot;http://www.w3.org/TR/html4/loose.dtd&quot;</span><span class="hl kwa">&gt;</span>
<span class="hl kwa">&lt;html&gt;</span>
<span class="hl kwa">&lt;head&gt;</span>
<span class="hl kwa">&lt;meta</span> <span class="hl kwb">http-equiv</span>=<span class="hl str">&quot;Content-Type&quot;</span> <span class="hl kwb">content</span>=<span class="hl str">&quot;text/html; charset=iso-8859-15&quot;</span><span class="hl kwa">&gt;</span>
<span class="hl kwa">&lt;title&gt;</span>Probando onLoad<span class="hl kwa">&lt;/title&gt;</span>
<span class="hl kwa">&lt;/head&gt;</span>

<span class="hl kwa">&lt;body</span> onLoad='alert(<span class="hl str">&quot;Ahora está todo cargado&quot;</span>)'<span class="hl kwa">&gt;</span>
<span class="hl kwa">&lt;h1&gt;</span>Esta es una página que no tiene gran cosa<span class="hl kwa">&lt;/h1&gt;</span>

<span class="hl kwa">&lt;p&gt;</span>Pero podría
tenerla.<span class="hl kwa">&lt;/p&gt;</span></code>

<p>El uso de evento está hacia el final del código, donde usamos
  <code>alert</code> que se activa tras el evento <code>load</code>, es decir, cuando se
  carga la página</p>

<div class='ejercicios' id='ej.TJ.5'>
<h3>Bloque TJ.5</h3>
<ol>
    <li> Realizar una página con un script en JavaScript que muestre todas
  las cabeceras h2 de la misma cuando se haya cargado.

</li>
    <li> Crear un script que cuando se pase el ratón sobre un enlace abra una
  nueva ventana con el URL al que apunta el enlace (Pista: buscar los
  eventos correspondientes).
</li>
</ol>
</div>







<h2><a name='TJ:t1:odds'>TJ.6 Para finalizar </a> <a href='#TJ:t1:odds' style='font-size:small'>#</a></h2>



<p>Cualquiera de los recursos que listo ahí abajo pueden resultar
      útiles para ampliar información sobre JavaScript. Quizás también
      pueda ser interesante usar alguna librería que facilite su uso
      como <a href='http://mochi.github.com/mochikit/'>Mochikit</a> o <a
	href='http://www.prototypejs.org/'>Prototype</a>. También el
      <a href='http://code.google.com/webtoolkit/'>Google Web
	Toolkit</a> permite desarrollar en AJAX programando sólo en
      Java, aunque pueda que el JS generado necesite algún retoque
      adicional. </p>


<h2><a name='TJ:t1:agra'>TJ.7 Agradecimientos </a> <a href='#TJ:t1:agra' style='font-size:small'>#</a></h2>



<p>Agradezco a los <a
	href='http://barrapunto.com/comments.pl?sid=69179'>comentaristas</a>
	de <a href='http://barrapunto.com/comments.pl?sid=68032'>los
	diferentes anuncios</a>
	que <a href='http://barrapunto.com/comments.pl?sid=67899'>publiqué
	en Barrapunto</a> sus comentarios y sugerencias. También a
	Javier Espigares por la lectura y comentarios sobre las
	versiones previas de este tema y el anterior.</p>  

<h2><a name='TJ:t1:biblio'>TJ.8 Bibliografía </a> <a href='#TJ:t1:biblio' style='font-size:small'>#</a></h2>



<p>Hay dos libros fundamentales para aprender JS, aunque están muy
      enfocados a JS en el navegador:<a
	href='http://bencore.ugr.es/iii/encore/record/C|Rb2011082|Sjavascript+definitive+guide|Orightresult|X2?lang=spi&suite=pearl'> <em>Javascript: The Definitive
    Guide</em>, el libro del rinoceronte</a>, editado por O'Reilly, que
      está <a href='http://proquest.safaribooksonline.com/9781449393854?uicode=goliat'>disponible
    como recurso eletrónico en la UGR</a> y <a href='http://bencore.ugr.es/iii/encore/record/C|Rb1987808|Sjavascript+bible|Orightresult|X5?lang=spi&suite=pearl'>	<em>JavaScript Bible, de Danny Goodman</em>, un tocho considerable</a>,
	en el que hay de todo, y que viene con un útil CD con
	ejemplos. También está como  <a
					href='http://proquest.safaribooksonline.com/?uiCode=goliat&xmlId=9780470526910'>recurso
      electrónico</a>. Hay <a href='http://bencore.ugr.es/iii/encore/search/C|Sjavascript|Orightresult|U1?lang=spi&suite=pearl'>muchos
      más recursos, algunos de ellos disponibles de forma electrónica</a>.</p>

<br clear='all'>

<div class='licencia'>Este material
  está <a href='http://curso-sobre.berlios.de/gfdles/'>disponible bajo
    los términos de la licencia GNU FDL</a>. Si observas algún error
  en la página, te agradeceremos que nos hagas llegar un informe de
  error por correo electrónico (dirección abajo) o, si estás dado de
  alta en la asignatura, a través
  del <a href='http://code.google.com/p/aap-etsiit-ugr/issues/entry'>sistema
  de tickets de la misma</a>.  </div>

<div style='float:right'>
  <a href="http://validator.w3.org/check?uri=referer"><img
							 src="http://www.w3.org/Icons/valid-html401"
							 alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</div>
    
<p>    <address><a href="mailto:jj (at) merelo.net">Juan
      J. Merelo</a></address> </p>



<script type='application/javascript'>

$(function tit(){
	var h2 ='';
	$("h2").each( function() { 
		h2 += this.textContent + " - "; 
		} );
        newwindow=window.open();
        newdocument=newwindow.document;
	newdocument.write(h2);
$("#cambiando").html( h2 ); 
});

</script>




  </body>
</html>






